<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>菜单列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="/js/plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1911813_s7m2ktfo.css"  media="all"/>
    <link rel="stylesheet" href="/css/public.css" media="all" />
</head>
<body class="tabMain"  >
<div id="menuList">
    <div class="layui-row">
        <div class="search_text float-l ">
            <i class="iconfont gkb-sousuo"></i>
            <input type="text" placeholder="请输入菜单名称" maxlength="10" id="search_input"/>
        </div>
        <button type="button" class="layui-btn float-l magl10 search_btn" id="btn_search">
            <i class="iconfont gkb-sousuo"></i> 搜索
        </button>
    </div>
    <div class="layui-row magt10">
        <button type="button" class="layui-btn" id="btn_add">
            <i class="layui-icon layui-icon-addition"></i>
            添加字典
        </button>
    </div>
    <div class="magt10">
        <table class="layui-table"  >
            <colgroup>
                <col width="250"  align="center">
                <col width="250"  align="center">
                <col width="100"  align="center">
                <col >
                <col width="350"  align="center">
            </colgroup>
            <thead>
            <tr class="layui-center">
                <th class="layui-center">字典名称</th>
                <th class="layui-center">字典值</th>
                <th class="layui-center">排序</th>
                <th class="layui-center">备注</th>
                <th class="layui-center">操作</th>
            </tr>
            </thead>
            <tbody>
            <template v-for="(firstItem,firstIndex) in dataList" >
                <tr>
                    <td class="">
                        <div class="magl10">
                            <i class="iconfont gkb-jiantou" v-show="showIndex!= firstIndex && (firstItem.children != null && firstItem.children.length>0)"  @click="showChildred(firstIndex,firstIndex)"></i>
                            <i class="iconfont gkb-jiantouxiangxia" v-show="showIndex == firstIndex && (firstItem.children != null && firstItem.children.length>0)" @click="showChildred(firstIndex,-1)"></i>
                            {{firstItem.name}}
                        </div>
                    </td>
                    <td class="layui-center">{{firstItem.value}}</td>
                    <td class="layui-center">{{firstItem.sortIndex}}</td>
                    <td class="layui-center">{{firstItem.remark}}</td>
                    <td  class="layui-center" >
                        <button type="button" class="layui-btn layui-btn-sm" @click="eidtInfo(firstIndex,-1)"><i class="layui-icon layui-icon-edit" ></i>编辑</button>
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" @click="deleteItem(firstItem.id)" v-show="firstItem.children==null || firstItem.children.length==0"><i class="layui-icon layui-icon-delete"></i>删除</button>
                    </td>
                </tr>
                <table class="layui-table"  lay-skin="row" v-if="firstItem.children != null &&  firstItem.children.length>0">
                    <colgroup>
                        <col width="250"  align="center">
                        <col width="250"  align="center">
                        <col width="100"  align="center">
                        <col >
                        <col width="350"  align="center">
                    </colgroup>
                    <tbody>
                    <template v-for="(secondItem,secondIndex) in firstItem.children">
                        <tr v-show="showIndex == firstIndex">
                            <td class="">
                                <div class="magl30">
                                    {{secondItem.name}}
                                </div>
                            </td>
                            <td class="layui-center">{{secondItem.value}}</td>
                            <td class="layui-center">{{secondItem.sortIndex}}</td>
                            <td class="layui-center">{{secondItem.remark}}</td>
                            <td  class="layui-center" >
                                <button type="button" class="layui-btn layui-btn-sm"  @click="eidtInfo(firstIndex,secondIndex)" ><i class="layui-icon layui-icon-edit"></i>编辑</button>
                                <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" @click="deleteItem(secondItem.id)" ><i class="layui-icon layui-icon-delete"></i>删除</button>
                            </td>
                        </tr>
                    </template>
                    </tbody>
                </table>
            </template>

            </tbody>
        </table>
    </div>
    <div class="tabMain" style="width: 550px" hidden id="detailInfo">
        <form class="layui-form" action="" lay-filter="userinfo">
            <div class="layui-form-item">
                <label class="layui-form-label">上级字典</label>
                <div class="layui-input-block">
                    <select name="parentID" id="parentID" lay-filter="parentID" lay-search="">
                        <option value="">一级字典</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">字典名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" lay-verify="required" maxlength="20"  lay-reqtext="请输入字典名称"  autocomplete="off" placeholder="请输入字典名称" class="layui-input">
                    <input type="hidden" id="id" name="id" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">字典值</label>
                <div class="layui-input-block">
                    <input type="text" name="value" lay-verify="required" maxlength="20"  lay-reqtext="请输入字典值"  autocomplete="off" placeholder="请输入字典值" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">排序</label>
                <div class="layui-input-block">
                    <input type="number" name="sortIndex" lay-verify="required" maxlength="5"  autocomplete="off" placeholder="请输入排序" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入备注信息" class="layui-textarea" name="remark"></textarea>
                </div>
            </div>
            <div class="layui-form-item align-center magt30">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-primary" id="btn_cancle">取  消</button>
                    <button type="submit" class="layui-btn" lay-submit  lay-filter="btn_save" id="btn_save">保  存</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script type="text/javascript" src="/js/jquery-3.5.1.js" ></script>
<script type="text/javascript" src="/js/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/js/plugins/vue/vue.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/service.js"></script>
<script type="text/javascript" src="/js/system/dictionary/dictionary.js" ></script>
</html>
